<script lang="ts" setup>
import { Field, type FieldRule } from "vant";
import { computed } from "vue";

interface PropsData {
  required?: boolean;
  name?: string;
  label?: string;
  modelValue?: string | number;
  placeholder?: string;
  rules?: FieldRule[];
}

const propsData = withDefaults(defineProps<PropsData>(), {
  placeholder: "请输入",
});

const emits = defineEmits(["update:modelValue"]);

const address = computed({
  get: () => propsData.modelValue,
  set: (val) => {
    emits("update:modelValue", val);
  },
});
</script>

<template>
  <div class="public-address-box">
    <field
      label-align="top"
      v-model="address"
      :label="propsData.label"
      :name="propsData.name"
      :required="propsData.required"
      :placeholder="propsData.placeholder"
      :rules="propsData.rules"
    />
    <div class="public-input-icon">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.public-address-box {
  position: relative;
}
.public-input-icon {
  position: absolute;
  color: #1677ff;
  display: flex;
  align-items: center;
  top: 10px;
  right: 20px;
}
</style>
